<template>
	<view class="">
		<!-- 卡券类型切换 -->
		<view class="kqlx">
			<view class="lqkd" v-for="(item,index) in lxlist" :class="activ==index ? 'activs':''"  @click="listactive(index)" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="lq">
			<view class="lqlist"  v-for="(item,index) in couponList" :class="activ == 0 ?'':'qucbj'" :key="index">
				<view class="ljlq">
					¥<text>{{item.amount}}</text>
					<view class="" v-if="activ==0" @click="isGoodsList()">
						去使用
					</view>
					<view class="" v-else v-html="activ ==1 ?'已使用':'已过期'">
						
					</view>
				</view>
				<view class="ljlqright">
					<view class="lptit">
						{{item.name}}
					</view>
					<view class="lptit1">
						{{item.description}}
					</view>
					<view class="lptit2">
						有效期至：{{item.usetimeend | date('yyyy-mm-dd')}}
					</view>
				</view>
			</view>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				activ:0,
				lxlist:[
					{name:"未使用"},
					{name:"已使用"},
					{name:"已过期"}
				],
				stateCurrent:1,
				list:[
					
				],//可领取的优惠券
				isEmpty: false,
				navState: 'event',
				navbarHeadState: [
					{
						value: 'event',
						title: '领券中心'
					},
					{
						value: 'user',
						title: '我的优惠券'
					}
				],
				couponsState: [
					{
						id: 1,
						title: '可使用'
					},
					{
						id: 2,
						title: '暂不可用'
					},
					{
						id: 3,
						title: '无效优惠券'
					}
				],
				couponList: []
			}
		},
		onLoad() {
			this.getCouponList();
		},
		methods: {
			// 顶部切换选择优惠券类型
			listactive(index){
				let _this=this
				switch(index) {
				     case 0:
						_this.stateCurrent = 1
				        break;
				     case 1:
				       _this.stateCurrent = 2
				        break;
					case 2:
						_this.stateCurrent = 3
					   break;
				     default:
				} 
				_this.activ=index
				_this.getCouponList()
			},
			isGoodsList(){
				uni.switchTab({
					url:'../index/commodity'
				})
			},
			// 获取卡券
			getCouponList() {
				let that = this;
				that.$http('coupons.list', {
					type: that.stateCurrent
				}).then(res => {
					if (res.code === 1) {
						that.couponList = res.data;
						that.isEmpty = !that.couponList.length;
					}
				});
			},
		}
	}
</script>

<style scoped>
	.lq{
		background-color: #F9F9F9;
		padding: 0 32rpx;
		/* margin-top: 37rpx; */
	}
	.lqlist{
		background-image: url("https://s1.ax1x.com/2022/03/25/qtHl1P.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 42rpx 0 50rpx;
	}
	.lqlist{
		display: flex;
		justify-content: space-between;
		margin-bottom: 34rpx;
	}
	.lqlist>view:first-of-type{
		width: 40%;
		text-align: center;
	}
	.ljlq{
		font-size: 48rpx;
		font-weight: bold;
		color: #ffffff;
	}
	.ljlq>text {
		font-size: 60rpx;
		font-weight: bold;
		color: #ffffff;
	}
	.ljlq>view{
		font-size: 24rpx;
		font-weight: 500;
		color: #FF9A33;
		width: 160rpx;
		height: 42rpx;
		background: #ffffff;
		border-radius: 21rpx;
		line-height: 42rpx;
		margin: 32rpx auto 0;
	}
	.lptit{
		font-size: 35rpx;
		font-weight: bold;
		color: #ffffff;
	}
	.lptit1{
		font-size: 24rpx;
		font-weight: 400;
		color: #ffffff;
		margin: 13rpx 0 20rpx;
	}
	.lptit2{
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
		width: 310rpx;
		height: 42rpx;
		background: rgb(255,255,255,0.2);
		border-radius: 18rpx;
		line-height: 42rpx;
		margin: 0 auto;
	}
	.ljlqright{
		width: 60%;
		text-align: center;
	}
	.kqlx{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80rpx;
		background: #FFFFFF !important;
		padding: 0 !important;
		margin-bottom: 49rpx;
	}
	.lqkd{
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
	}
	.activs{
		font-weight: bold;
		color: #FF9A33 !important;
	}
	.qucbj{
		background-image: url("https://s1.ax1x.com/2022/03/25/qYYoDA.png");
	}
	.qucbj .ljlq{
		font-size: 48rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.qucbj .ljlq>text{
		font-size: 60rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.qucbj .ljlq>view{
		background: #FFFFFF !important;
		color: #999999;
	}
	.qucbj .lptit{
		font-size: 42rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.qucbj .lptit1{
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
	.qucbj .lptit2{
		font-size: 24rpx;
		color: #FFFFFF;
	}


</style>
